/*
 * @Author: your name
 * @Date: 2020-07-15 23:01:33
 * @LastEditTime: 2020-07-15 23:28:25
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ts\react_app\src\animate.js
 */

 import React, { Component } from 'react'

 import {CSSTransition} from 'react-transition-group'
 import './animate.css'

 export default class Animate extends Component {
   constructor(props){
    super(props)
    console.log(this)
    this.state = {
      isShow:false
    }
    this.toToggole = this.toToggole.bind(this)
   }
   shouldComponentUpdate(nextProps,nextState){
    if(nextState.isShow !== this.state.isShow){
      console.log('child 悟空更新1-shouldComponentUpdate')
      return true
    }
    return false
  }
   toToggole(){
     this.setState({
      isShow:this.state.isShow ? false : true
     })
   }
   render() {
     return (
       <div>
         <CSSTransition
          in={this.state.isShow}
          timeout={1000}
          classNames="boss-text"
          unmountOnExit
         >
            <div>
              BOSS 及人物孙悟空
            </div>
         </CSSTransition>
         <button onClick={this.toToggole}>召唤</button>
       </div>
     )
   }
 }
